<template>
  <div class="applicationAssessment">
    <p class="bottons">
      <el-button v-if="Submission" @click="submitH3" type="text">
        <i class="el-icon-document"></i>提交H3审批
      </el-button>
      <el-button v-if="role" @click="cancelAdopt" type="text">
        <i class="el-icon-close"></i>取消通过
      </el-button>
      <el-button @click="ViewProcessTraces" v-if="!role" type="text">
        <i class="el-icon-tickets"></i>查看流程痕迹
      </el-button>
      <el-button v-if="!role" @click="dialogTableVisible = true" type="text">
        <i class="el-icon-printer"></i>附件
      </el-button>
      <el-button v-if="!role" @click="cancelAdopt" type="text">
        <i class="el-icon-close"></i>关闭
      </el-button>
    </p>
    <h1>{{titleName}}</h1>
    <table>
      <tr class="tableTitle">
        <td colspan="4">基本信息</td>
      </tr>
      <tr>
        <td>发起人</td>
        <td>{{info.originator}}</td>
        <td>发起时间</td>
        <td>{{info.originateTime}}</td>
      </tr>
      <tr>
        <td>发起组织名称</td>
        <td>{{info.originateName}}</td>
        <td>付款审批单号</td>
        <td>{{info.code}}</td>
      </tr>
      <tr>
        <td>付款审批名称</td>
        <td colspan="3">{{info.payNote}}</td>
      </tr>
      <tr class="tableTitle">
        <td colspan="4">付款审批概述</td>
      </tr>
      <tr>
        <td>审批事项</td>
        <td>{{info.approvalMatter}}</td>
        <td>付款类型</td>
        <td>{{info.payType}}</td>
      </tr>
      <tr>
        <td>前置条件</td>
        <td colspan="3">
          <pre v-html="info.precondition"></pre>
        </td>
      </tr>
      <tr>
        <td>流程事项编码</td>
        <td colspan="3">{{info.workflowCodeInfo}}</td>
      </tr>
      <tr>
        <td>付款方</td>
        <td>{{info.payerName}}</td>
        <td>收款方</td>
        <td>{{info.payeeName}}</td>
      </tr>
      <tr>
        <td>付款方开户支行</td>
        <td>{{info.payerBranchBankName}}</td>
        <td>收款方开户支行</td>
        <td>{{info.bankBranchName}}</td>
      </tr>
      <tr>
        <td>付款账号</td>
        <td>{{info.payerAccount}}</td>
        <td>收款账号</td>
        <td>{{info.payeeAccount}}</td>
      </tr>
      <tr>
        <td>本次请款金额</td>
        <td>{{info.payBrokerage}}</td>
        <td>批复金额</td>
        <td>{{info.approvalPayBrokerage}}</td>
      </tr>
      <tr>
        <td>票据方式</td>
        <td>{{info.billWay}}</td>
        <td>计税方式</td>
        <td>{{info.taxCalculationWay}}</td>
      </tr>
      <tr>
        <td>经办人</td>
        <td>{{info.operator}}</td>
        <td>联系电话</td>
        <td>{{info.mobile}}</td>
      </tr>
      <tr class="tableTitle" v-show="info.payType == 'E-Bill付款'">
        <td colspan="4">保理结算信息</td>
      </tr>
      <tr v-show="info.payType == 'E-Bill付款'">
        <td>本次融资金额</td>
        <td>{{info.financialAmount?formatMoney(info.financialAmount)+'元':''}}</td>
        <td>金融产品名称</td>
        <td>{{info.financialProductName}}</td>
      </tr>
      <tr v-show="info.payType == 'E-Bill付款'">
        <td>预估融资利率</td>
        <td>{{info.interestRate}}</td>
        <td>其中：好生活利率</td>
        <td>{{info.easylifeRate}}</td>
      </tr>
      <tr v-show="info.payType == 'E-Bill付款'">
        <td>预估利息</td>
        <td>{{info.interest?formatMoney(info.interest)+'元':''}}</td>
        <td>融资可用额度</td>
        <td>{{info.availableAmount?formatMoney(info.availableAmount)+'元':''}}</td>
      </tr>
      <tr v-show="info.payType == 'E-Bill付款'">
        <td>账期</td>
        <td>{{info.acctPeriod?info.acctPeriod+'天':''}}</td>
        <td>到期预计本息金额</td>
        <td>{{info.principalAndInterest?formatMoney(info.principalAndInterest)+'元':''}}</td>
      </tr>
      <tr v-show="info.payType == 'E-Bill付款'">
        <td>付款类型</td>
        <td>{{info.billPayType}}</td>
        <td>预计还款日期</td>
        <td>{{info.repayDate}}</td>
      </tr>
      <tr class="tableTitle">
        <td colspan="4">审批意见</td>
      </tr>
      <tr style="height:60px" v-for="item in this.info.logList" :key="item.id">
        <td v-if="item.oprationFlag == 0">经办人</td>
        <td v-else>审批人</td>
        <td colspan="3" class="approval">
          <span>{{item.content ? item.content : '无'}}</span>
          <span>{{item.userName}}</span>
          <span>{{item.userRole}}</span>
          <span>{{auditTime(item.auditTime)}}</span>
        </td>
      </tr>
    </table>
    <el-dialog :visible.sync="dialogTableVisible">
      <el-table border :data="fileList">
        <el-table-column property="fileName" label="文件名"></el-table-column>
        <el-table-column property="uploadName" label="创建人"></el-table-column>
        <el-table-column property="uploadTime" label="上传时间"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import utils from "@/common/utils";
import api from "@/api/apiPath";
export default {
  name: "applicationAssessment",
  data() {
    return {
      titleName: '结佣付款申请审批',
      info: {},
      fileList: [],
      type: "",
      dialogTableVisible: false,
      role: true,
      id: "",
      workItemId: "",
      instanceId: "",
    };
  },
  computed: {
    Submission() {
      let sub = false;
      if (this.role && this.info.examineState == 2) {
        sub = true;
      } else {
        sub = false;
      }
      return sub;
    }
  },
  created() {
    let role = JSON.parse(window.localStorage.getItem("cmsUser")).roleName;
    if(this.$route.query.title) {
      this.titleName = '返还款付款申请审批'
    }
    let fromType = false;
    if(this.$route.query.fromType) {
      fromType = true
    }
    if (role == "运营人员" || fromType) {
      this.role = false;
    } else {
      this.role = true;
    }
    // type 6网络推客,  7经纪公司,   8经纪人
    this.id = this.$route.query.id;
    this.type = this.$route.query.type;
    this.details();
  },
  methods: {
    formatMoney(val){
      return utils.formatMoney(val)
    },
    auditTime(auditTime) {
      return utils.getTimeString(auditTime);
    },
    details() {
      this.$axios
        .post(api.bpMselectProcess, { id: this.id, type: this.type })
        .then(res => {
          console.log(res)
          this.info = res;
          this.fileList = res.fileList || [];
          this.$axios.post(api.selectInstanceInfo, { id: res.id }).then(res => {
            this.workItemId = res.workItemId;
            this.instanceId = res.instanceId;
          });
        });
    },
    submitH3() {
      if(this.$route.query.title) {
        let form = JSON.parse(window.localStorage('form'));
        console.log(this.$route.query)
        console.log(form)
        this.$axios
          .post("/commission/developer/add",form)
          .then(res => {
            this.$message({
              type: "success",
              message: "操作成功"
            });
            this.$router.push('./developerPayment');
            return false;
          });
      }
      let form = JSON.parse(this.$route.query.form) || {};
      form["applyId"] = this.id;
      if (this.type == 6) {
        form["auditStatus"] = 3;
        this.$axios.post(api.pusherAudit, form).then(res => {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$router.push("./internetTwitter");
        });
      } else if (this.type == 7) {
        form["auditStatus"] = true;
        this.$axios.post(api.companyAudit, form).then(res => {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$router.push("./brokerCompany");
        });
      } else if (this.type == 8) {
        form["auditStatus"] = true;
        this.$axios.post(api.brokerAuditsh, form).then(res => {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$router.push("./brokerCommission");
        });
      }
    },
    // 查看流程痕迹
    ViewProcessTraces() {
      // 测试t  生产去掉t
      let mobile = JSON.parse(window.localStorage.getItem("cmsUser")).mobile;

      let variable = document.domain;
      let url;
      if(variable == "localhost"){
          url = "http://th3bpm.lifeat.cn:45787"
      }
      if(variable == "ntcms.lifeat.cn"){
          url = "http://th3bpm.lifeat.cn:45787"
      }
      if(variable == "ncms.lifeat.cn"){
          url = "http://h3bpm.lifeat.cn"
      }
      if(variable == "nhcms.lifeat.cn"){
          url = "https://hh3bpm.lifeat.cn:45788"
      }
      let winUrl = `${url}/Portal/#/platform/login?mobile=${mobile}&workItemId=${this.workItemId}&instanceId=${this.instanceId}`;
      window.open(winUrl);
    },
    // 取消通过
    cancelAdopt() {
      if (this.type == 6) {
        this.$router.push("./internetTwitter");
      } else if (this.type == 7) {
        this.$router.push("./brokerCompany");
      } else if (this.type == 8) {
        this.$router.push("./brokerCommission");
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
.applicationAssessment {
  position: relative;

  h1 {
    color: #409eff;
    margin: 35px auto;
    text-align: center;
  }

  .bottons {
    position: absolute;
    right: 35px;
    top: 5px;

    i {
      margin-right: 5px;
    }

    el-button {
      margin-right: 15px;
    }
  }

  table {
    font-size: 15px;
    border-collapse: collapse;
    width: 100%;
    margin: 0 auto;

    tr td {
      border: 1px solid #ccc;
      line-height: 40px;
      box-sizing: border-box;
      padding: 0 3px;
      text-align: center;
      width: 25%;
    }

    tr td:nth-child(odd) {
      text-align: right;
      color: #409eff;
    }

    tr td:nth-child(even) {
      text-align: left;
    }

    .tableTitle td {
      text-align: center !important;
      background: #f2f2f2;
      color: #409eff;
      font-weight: bold;
    }

    pre {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
    }

    .approval span {
      margin-left: 15px;
    }
  }
}
</style>